<script setup lang="ts">
import mp1 from '~/assets/imgs/banner/banner-mp1.png';
import pc1 from '~/assets/imgs/banner/banner-pc1.png';

import { useAuthed } from '~/composables/useAuthed';

const bp = useAppBreakpoints();
const router = useRouter();
const authed = useAuthed();
</script>

<template>
  <swiper-slide class="swiper-slide">
    <div class="swiper-slide__item" @click="router.push({ name: authed ? RN.REFERRAL : RN.REFERRAL_ABOUT });">
      <img v-if="bp.tabletl" :src="pc1">
      <img v-else :src="mp1">
      <div class="swiper-slide__item-content">
        <I18nT keypath="gIndSjV1k9SUh1Qk4HY" tag="div" class="title">
          <template #highlightTxt>
            <span class="text-yellow"> 1500 USDT</span>
          </template>
        </I18nT>
        <div class="sub-title">
          {{ $t('k91sbZ07HkTs34Y8A2Hh') }}
        </div>
        <AButton class="btn ant-cover__Button-3d-primary" type="primary">
          {{ $t('lm5xBznmLhSdHBmmAy') }}
        </AButton>
      </div>
    </div>
  </swiper-slide>
</template>

<style scoped lang="scss">
@use './style.scss';
</style>
